<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .container {
            width: 800px;
            margin: 0 auto;
            margin-top: 100px;
            padding: 30px 0;
            border: 1px dashed #272627;
        }
        
        .test {
            width: 100%;
            padding: 10px 0;
            margin: 20px 0;
            color: #4bade8;
            font-size: 18px;
            text-align: center;
        }
        
        #jsonTable {
            width: 500px;
            margin: 0 auto;
        }
        
        #jsonTable th,
        td {
            padding: 6px 0;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="test">获取模拟json数据</div>
        <table border="1" cellspacing="0" bordercolor="#4bade8" cellpadding="0" id="jsonTable">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </table>
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(function() {
            getDate();

            function getDate() {
                var temp = '';
                $.ajax({
                    type: "get",
                    url: "./statics/data.json",
                    dataType: "json",
                    success: function(res) {
                        var list = res.animals
                        console.log(list)
                        for (var $i = 0; $i < list.length; $i++) {
                            temp +=
                                '<tr>' +
                                '<td>' + list[$i].id + '</td>' +
                                '<td>' + list[$i].name + '</td>' +
                                '<td>' + list[$i].age + '</td>' +
                                '</tr>';
                        }
                        $("#jsonTable tr:not(:first)").html(""); /*  除了第一行tr的内容，其余内容清空，防止获取重复的数据  */
                        $("#jsonTable").append(temp);
                    }
                });
            }
        });
    </script>
</body>

</html>